<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/layui/dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<blockquote class="layui-elem-quote">该页面您需要填写图表的相关信息。</blockquote>

<div class="layui-col-xs10 layui-col-sm10 layui-col-md10" >

<form class="layui-form" action="/return/admin/ChartDisplay/form/" method="post">
  <div class="layui-form-item">
    <label class="layui-form-label">图表标题</label>
    <div class="layui-input-block">
      <input type="text" name="title" id="title" value='{{ formData.title }}' lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" >
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">图表缩略图</label>
    <div class="layui-input-block">
        <div class="layui-upload">
          <button type="button" class="layui-btn" id="test1">点击选择图片</button>
          <div class="layui-upload-list">
                <img class="layui-upload-img" id="demo1" style="height: 150px;width: 150px">
                <p id="demoText"></p>
          </div>
        </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label ">图表JS</label>
    <div class="layui-input-block" id="js-name">
      <button type="button" class="layui-btn  layui-btn-normal" id="test4"><i class="layui-icon"></i>点击选择JS</button>
    </div>
  </div>
 <div class="layui-form-item">
    <label class="layui-form-label" >图表Script</label>
    <div class="layui-input-block" id="py-name">
        <button type="button" class="layui-btn layui-btn-normal" id="test3"><i class="layui-icon"></i>点击选择python脚本</button>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">图表标签</label>
    <div class="layui-input-block">
      <input type="text" name="tag"  id="tag"  value='{{ formData.tag }}' lay-verify="required" placeholder="图表标签" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">是否可浏览</label>
    <div class="layui-input-block">
      <input type="checkbox" checked="" name="chartState" id="chartState" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">图表简述</label>
    <div class="layui-input-block">
      <input type="text" name="abstract" id="abstract" value='{{ formData.abstract }}' lay-verify="required|abstract" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">图表描述</label>
    <div class="layui-input-block">
      <textarea name="chartdescription"  id="chartdescription"  placeholder="请输入内容" lay-verify="required|textarea" class="layui-textarea">{{ formData.chartdescription }}</textarea>
    </div>
  </div>


{#    <div class="layui-form-item" pane="">#}
{#    <label class="layui-form-label">原始复选框</label>#}
{#    <div class="layui-input-block">#}
{#      <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">#}
{#      <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">#}
{#      <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">#}
{#    </div>#}
{#  </div>#}
  <!--<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">编辑器</label>
    <div class="layui-input-block">
      <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
    </div>
  </div>-->
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>
<!-- 示例-970 -->
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

</div>


<script src="/static/layui/dist/layui.js" charset="utf-8"></script>
<script src="/static/js/echarts.min.js"></script>
<script type="text/javascript" src="/static/js/map/js/china.js"></script>
<script src="/static/js/jquery-1.8.3.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form', 'layedit'], function() {
        var form = layui.form
         ,layer = layui.layer
        ,layedit = layui.layedit;

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题少于得5个字符';
                }
            },
            abstract:function (value) {
                if (value.length < 10) {
                    return '简述少于10个字符';
                }
            },
            textarea:function (value) {
                if (value.length < 10) {
                    return '简述少于10个字符';
                }
            }
        });
        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            {#    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {#}
            {#      offset: '6px'#}
            {#    });#}
            {#    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)#}
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            console.log(JSON.stringify(data.field));
            return true;
        });

});
layui.use(['upload'], function(){
  var $ = layui.jquery
  ,upload = layui.upload;

  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '/return/admin/ChartDisplay/upload/'
    ,size: 80 //指定大小 ,单位kb
    ,data:{id:'exhibitionImg'}
{#    ,data: {#}
{#      id: function(){#}
{#        return $('#id').val();#}
{#      }#}
{#    }#}
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
       console.log(res);
      //如果上传失败
      if(res.code > 0){
        return layer.msg('缩略图上传失败');
      }
      else if(res.code == 0){
        return layer.msg('缩略图上传成功');
      }
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });

  //指定允许上传的文件类型
  upload.render({
    elem: '#test3'
    ,url: '/return/admin/ChartDisplay/upload/'
    ,data:{id:'javascriptFile'}
    ,accept: 'file' //普通文件
    ,size: 20 //指定大小 ,单位kb
    ,done: function(res){
      $('#py-name').append('<span class="layui-inline layui-upload-choose">'+ res.name +'</span>');
     //如果上传失败
      if(res.code > 0){
        return layer.msg('脚本上传失败');
      }
      else if(res.code == 0){
        return layer.msg('脚本上传成功');
      }
    }
  });

//上传js
  upload.render({
    elem: '#test4'
    ,url: '/return/admin/ChartDisplay/upload/'
    ,data:{id:'javascriptFile'}
    ,accept: 'file' //普通文件
    ,size: 20 //指定大小 ,单位kb
    ,done: function(res){
      $('#js-name').append('<span class="layui-inline layui-upload-choose">'+ res.name +'</span>');
     //如果上传失败
      if(res.code > 0){
        return layer.msg('图表JS上传失败');
      }
      else if(res.code == 0){
        return layer.msg('图表JS上传成功');
      }
    }
  });

});
</script>
<script>
         var Message = {{ Message|safe }};
         var Page = {{ page|safe }};
</script>
<script id="chartJS" type="text/javascript" src="/static/showData_{{ formData.chartid }}.js"></script>
</body>
</html>